<template>
  <div id="home-page-monitor" style="height: 280px; width: 160px; margin: 0 auto;"></div>
</template>

<script>
export default {
  name: "HomePageMonitor",
  props: {
    statisticsTest: {
      type: Number,
      default: 2
    },
    energy: {
      type: Number,
      default: 0.6
    }
  },
  data() {
    return {
      myChart: '',
      statisticList: [1, 2]
    }
  },
  methods: {
    myCharts() {
      let that = this
      // 基于准备好的dom，初始化echarts实例
      this.myChart = this.$echarts.init(document.getElementById('home-page-monitor'), 'dark');
      // 监听屏幕变化自动缩放图表
      window.addEventListener('resize', function () {
        that.myChart.resize()
      })

      // 指定图表的配置项和数据
      let option = {
        backgroundColor: 'rgba(0,0,0,0)',
        title: {
          text: '新增数据量',
          left: 'center',
          top: '40%',
          textStyle: {
            fontSize: 14
          },
        },
        // 提示框组件
        tooltip: {
          trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
        },
        xAxis: {
          type: 'category',
          boundaryGap: false
        },
        yAxis: {type: 'value'},
        grid: [
          {top: '50%', bottom: '10%'},
        ],
        series: [
          {
            name: '数据增长量',
            type: 'line',
            smooth: true,
            smoothMonotone: 'x',
            areaStyle: {
              origin: 'start'
            },
            data: this.statisticList,
            // 提示框组件
            tooltip: {
              trigger: 'item', // 触发类型, 数据项图形触发，主要在散点图，饼图等无类目轴的图表中使用。
              textStyle: {
                color: '#000' // 文字颜色
              },
              // 提示框浮层内容格式器，支持字符串模板和回调函数两种形式
              // 水球图: {a}（系列名称），{b}（无），{c}（数值）
              // 使用函数模板   传入的数据值 -> value: number|Array,
              formatter: function (value) {
                return (value.data)+''
              }
            }
          },
          {
            name: '负载显示',
            type: 'liquidFill',
            data: [this.energy],
            color: ['#31ff00'],
            // 半径
            radius: '50%',
            center: ['50%', '20%'],
            //波动方向
            // direction: 'bottom',
            label: {
              normal: {
                //fontSize:80    //这里也可以设置
                textStyle: {
                  //修改字体大小
                  fontSize: 20
                }
              }
            },
            outline: {
              show: true,
              borderDistance: 0, // 边框线与图表的距离 数字
              itemStyle: {
                opacity: 1, // 边框的透明度   默认为 1
                borderWidth: 2, // 边框的宽度
                shadowBlur: 1, // 边框的阴影范围 一旦设置了内外都有阴影
                shadowColor: '#a8a5a5', // 边框的阴影颜色,
                borderColor: '#a8a5a5' // 边框颜色
              }
            }
          }
        ]
      };

      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    }
  },
  // mounted是vue中的一个钩子函数，一般在初始化页面完成后，再对dom节点进行相关操作。
  // 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了
  mounted() {
    this.myCharts()
  },
  watch: {
    // 监控是否输入新的数据
    statisticsTest: {
      handler(newVal, oldVal) {
        // 如果数据大于10，删除最旧的数据
        if (this.statisticList.length < 8
        ) {
          this.statisticList.push(Math.abs(newVal - oldVal))
          this.myChart.setOption({
            series: [{
              name: '数据增长量',
              data: this.statisticList
            }]
          })
        } else {
          this.statisticList.push(Math.abs(newVal - oldVal))
          this.statisticList.shift()
          this.myChart.setOption({
            series: [{
              name: '数据增长量',
              data: this.statisticList
            }]
          })
        }
      },
      deep: true
    },
    energy(newVal) {
      this.energy = newVal
      this.myChart.setOption({
        series: [{
          name: '负载显示',
          data: [this.energy]
        }]
      })
    }
  }
}
</script>

<style scoped>

</style>